<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vendors/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/uploader.css">

<!--引入JS-->
<script type="text/javascript" src="__PUBLIC__/vendors/webuploader/webuploader.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/uploader.js"></script>

<!--ckfinder-->
<script src="__PUBLIC__/vendors/ckfinder/ckfinder.js"></script>


<ul class="nav nav-tabs" role="tablist" style="margin-top: -30px; padding: 0 20px;">
    <li role="presentation" class="active">
        <a href="#panel-uploader" aria-controls="uploader" role="tab" data-toggle="tab">
            <?php echo translate("utils-uploader:uploader"); ?>
        </a>
    </li>
    <li role="presentation">
        <a href="#panel-finder" aria-controls="finder" role="tab" data-toggle="tab">
            <?php echo translate("utils-uploader:finder"); ?>
        </a>
    </li>
</ul>

<div class="tab-content" style="padding: 10px;">
    <div role="tabpanel" class="tab-pane active" id="panel-uploader">
        <div id="uploader" class="wu-example">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns" style="display: none;">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="panel-finder">
        <div id="finder"></div>
    </div>
</div>

<script type="application/javascript">
    $(function () {
        initUploader("{$image_id}");
        CKFinder.widget("finder", {
            height: 600,
            onInit: function( finder ) {

                finder.on( 'file:dblclick', function( evt ) {
                    //文件地址
                    var file = evt.data.file.getUrl();
                    file = file.substr(file.indexOf("/uploads"));
                    $("#{$image_id}").attr("src", file);
                    layer.closeAll('page');
                } )
            }

        } );
    })
</script>